<!DOCTYPE HTML>
<html>
<head>
    <title>【${api.name}】</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <link rel="stylesheet" href="../libary/css/default.css" type="text/css"/>
    <link rel="stylesheet" href="../libary/css/element-plus.2.2.5.css" type="text/css"/>
</head>
<body>
<p class="heading"> &nbsp;&nbsp;${api.module}&${api.name}</p>
<div id="content">
    <h1>${section.index}、基本信息</h1>
    <table cellpadding="0" border="0" cellspacing="0" style="width: 800px;padding-left: 30px;">
        <tr>
            <td width="70" height="30" align="right">接口名称：</td>
            <td>${api.name}</td>
            <td align="right">接口编号：</td>
            <td>${api.no!}</td>
            <td align="right">负责人：</td>
            <td>${api.author!}</td>
        </tr>
        <tr>
            <td height="30" align="right">接口状态：</td>
            <td><#if api.completed>已完成<#else>开发中</#if></td>
            <td align="right">更新者：</td>
            <td>${api.creator!}</td>
            <td height="30" align="right">更新时间：</td>
            <td>${api.createDt}</td>

        </tr>
    </table>
    <div class="note" style="width:1380px;margin-left:30px">
        <p>&#9733 请求路径：${api.path}</p>
        <p>&#9733 请求方法：${api.requestMethod}</p>
        <#list officialEnvs as env>
            <p>&#9728 ${env.name!}环境：${env.basePath}${api.path}</p>
        </#list>
    </div>

    <h1>${section.index}、请求</h1>
    <h2>${section.index2}、请求参数说明</h2>
    <div v-for="node in requestNodes" style="width:1400px;margin-left:30px;margin-top: 8px;">
        <span style="font-weight: bold;font-size: 12px;">&#9733{{node.describe+node.name}}<bdo v-if="node.array">(数组)</bdo>：</span>
        <el-table :data="node.subNodes" :tree-props="{ children: 'subNodes', hasChildren: 'hasChildren' }"
                  class="treeTable" row-key="name" border>
            <el-table-column prop="name" label="参数名" width="250px" header-align="center">
                <template #default="scope">
                    <span v-if="scope.row.deprecated" style="text-decoration:line-through;color:red;">{{scope.row.name}}</span>
                    <span v-if="scope.row.deprecated==false">{{scope.row.name}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="describe" label="中文描述" width="140px" align="center"
                             header-align="center"></el-table-column>
            <el-table-column prop="typeAlias" label="数据类型" align="center" width="82px"
                             header-align="center"></el-table-column>
            <el-table-column label="必需" align="center" width="60px" header-align="center">
                <template #default="scope">
                    <span v-if="scope.row.required" style="color: red">是</span>
                    <span v-if="scope.row.required==false">否</span>
                </template>
            </el-table-column>
            <el-table-column prop="requiredGroup" label="必需组" align="center" width="70px"
                             header-align="center"></el-table-column>
            <el-table-column prop="maxLength" label="最大长度" align="center" width="82px"
                             header-align="center"></el-table-column>
            <el-table-column prop="min" label="最小值" align="center" width="70px" header-align="center"></el-table-column>
            <el-table-column prop="max" label="最大值" align="center" width="70px" header-align="center"></el-table-column>
            <el-table-column prop="example" label="示例" width="200px" header-align="center"></el-table-column>
            <el-table-column label="参数说明" header-align="center">
                <template #default="scope">
                    <div v-html="scope.row.note"></div>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <h2>${section.index2}、Rest请求示例</h2>
    <p style="margin-left: 30px;"><b>&#9733 请求地址：</b>${api.requestMethod} http://{ip}:{port}${servletPath}</p>
    <#if requestHeaders ??>
        <p style="margin-left: 30px;font-weight: bold">&#9733 请求Headers</p>
        <div class="code" style="width:1380px;margin-left:30px;max-height: 300px;overflow-y: auto">
            ${requestHeaders!}
        </div>
    </#if>
    <#if requestParams ??>
        <p style="margin-left: 30px;font-weight: bold">&#9733 请求Params</p>
        <div class="code" style="width:1380px;margin-left:30px;max-height: 300px;overflow-y: auto">${requestParams!}</div>
    </#if>
    <#if requestBody ??>
        <p style="margin-left: 30px;font-weight: bold">&#9733 请求Body</p>
        <div class="code" style="width:1380px;margin-left:30px;max-height: 300px;overflow-y: auto">${requestBody!}</div>
    </#if>
    <#if api.rpc ??>
        <h2>${section.index2}、Rpc请求示例</h2>
        <#if api.rpc.dependency ??>
            <h3>&#9733Maven依赖</h3>
            <ul class="code" style="width:1380px;margin-left:30px;padding:10px;height: 100px;">
                <li style="list-style-type:none;margin: 0px 0px 5px 0px;">&lt;dependency&gt;</li>
                <li style="list-style-type:none;margin-left: 15px;margin-top: 5px;">&lt;groupId&gt;${api.rpc.dependency.groupId}&lt;/groupId&gt;</li>
                <li style="list-style-type:none;margin-left: 15px;margin-top: 5px;">&lt;artifactId&gt;${api.rpc.dependency.artifactId}&lt;/artifactId&gt;</li>
                <li style="list-style-type:none;margin-left: 15px;margin-top: 5px;">&lt;version&gt;${api.rpc.dependency.version}&lt;/version&gt;</li>
                <li style="list-style-type:none;margin-left: 0px;margin-top: 5px;">&lt;/dependency&gt;</li>
            </ul>
        </#if>
        <h3>&#9733JAVA代码示例</h3>
        <ul class="code" style="width:1380px;margin-left:30px;">
            <#list api.rpc.imports as import>
                <li style="list-style-type:none;margin-left: 0px;margin-bottom: 2px;margin-top: 2px;"><span style="color: red ">import</span> ${import};</li>
            </#list>
            <li style="list-style-type:none;margin-left: 0px;margin-bottom: 2px;margin-top: 2px;"><span style="color: red ">import</span> javax.annotation.Resource;</li>
            <li style="list-style-type:none;margin-left: 0px;margin-bottom: 2px;margin-top: 2px;"><span style="color: red ">import</span> org.springframework.stereotype.Component;</li>

            <li style="list-style-type:none;margin-left: 0px;"></li>
            <li style="list-style-type:none;margin-left: 0px;"></li>
            <li style="list-style-type:none;margin-left: 0px;margin-bottom: 0"><span style="color: #a5a508">@Component</span></li>
            <li style="list-style-type:none;margin-left: 0px;margin-top: 0;"><span style="color: red ">public class</span> Demo{</li>
            <li style="list-style-type:none;margin-left: 20px;margin-bottom: 0"><span style="color: #a5a508">@Resource</span></li>
            <li style="list-style-type:none;margin-left: 20px;margin-top: 0"><span style="color: red ">private </span>${api.rpc.fieldString};</li>
            <li style="list-style-type:none;margin-left: 20px;"><span style="color: red ">public</span> void test(){</li>
            <#list api.rpc.codes as code>
                <li style="list-style-type:none;margin-left: 40px;">${code};</li>
            </#list>
            <li style="list-style-type:none;margin-left: 20px;">}</li>
            <li style="list-style-type:none;margin-left: 0px;">}</li>
        </ul>
    </#if>
    <h1>${section.index}、响应</h1>
    <h2>${section.index2}、响应体参数说明</h2>
    <div class="note" style="width:1380px;margin-left:30px">
        <P>&#9733 当请求头部参数Http-Client为pc时，系统将返回客户端值为pc或为空的数据项；</P>
        <P>&#9733 当请求头部参数Http-Client为mobile时，系统将返回客户端值为mobile时或为空的数据项；</P>
        <P>&#9733 当请求头部参数Http-Client为空时，系统将返回所有数据项；</P>
    </div>
    <el-table :data="resParamNodes" :tree-props="{ children: 'subNodes', hasChildren: 'hasChildren' }"
              style="width:1400px;margin-left:30px; margin-bottom: 20px;border: 0px solid #ddd;" class="treeTable"
              row-key="name" border>
        <el-table-column label="参数名" width="300px" header-align="center">
            <template #default="scope">
                <span v-if="scope.row.deprecated" style="text-decoration:line-through;color:red;">{{scope.row.name}}</span>
                <span v-if="scope.row.deprecated==false">{{scope.row.name}}</span>
            </template>
        </el-table-column>
        <el-table-column prop="describe" label="中文描述" width="160px" align="center"
                         header-align="center"></el-table-column>
        <el-table-column prop="typeAlias" label="数据类型" width="90px" align="center"
                         header-align="center"></el-table-column>
        <el-table-column prop="client" label="展示端" width="80px" header-align="center"></el-table-column>
        <el-table-column prop="example" label="示例" width="200px" header-align="center"></el-table-column>
        <el-table-column prop="notes" label="参数说明" header-align="center"></el-table-column>
    </el-table>
    <h2>${section.index2}、响应示例</h2>
    <div class="code" style="width:1380px;margin-left:30px;max-height: 300px;overflow-y: auto">
        ${responseData!}
    </div>
    <#if api.note ??>
        <h1>${section.index}、备注说明</h1>
        ${api.note!}
    </#if>
</div>
<br>

<br>
</body>
<script src="../libary/js/util.js"></script>
<script src="../libary/js/api/api.js?ver=1223"></script>
<script src="../libary/vue/vue.global3.2.36.js"></script>
<script src="../libary/vue/element-plus.2.2.5.js"></script>
<script src="../libary/jquery/jquery.min.js"></script>
<script type="text/javascript">
    var appName = "${app.name}";
    var contextPath = "libary";
    var apiId = "${api.id}";
    var requestMethod = "${api.requestMethod}";
    var apiPath = "${api.path}";
    $(document).ready(function () {
        getUnitTests();
    });
    //--------------vue start-----------------
    var requestNode = JSON.parse('${requestNode}');
    buildNote(requestNode);
    var responseNode = JSON.parse('${responseNode}');
    const App = {
        data() {
            return {
                requestNodes: requestNode.subNodes,
                resParamNodes: responseNode.subNodes
            };
        },
    };
    const app = Vue.createApp(App);
    app.use(ElementPlus);
    app.mount("#content");
</script>
</html>
